<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title></title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>

<div id="app">
    <div class="header">
        <div class="activity" style="margin-left:50px ">
            <h1>创建活动信息</h1>
            <el-form :model="act" label-width="80px" ref="act">
                <el-form-item label="活动名称">
                    <el-input v-model="act.aname"></el-input>
                </el-form-item>
                <el-form-item label="主办方">
                    <el-input v-model="act.aadmin"></el-input>
                </el-form-item>
                <el-form-item label="活动类型">
                    <template>
                        <el-radio label="0" v-model="act.atype">单人</el-radio>
                        <el-radio label="1" v-model="act.atype">队伍</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-date-picker
                            end-placeholder="结束日期"
                            range-separator="至"
                            start-placeholder="开始日期"
                            type="daterange"
                            v-model="value1">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动图片">
                    <el-upload
                            :auto-upload="false"
                            action="#"
                            list-type="picture-card">
                        <i class="el-icon-plus" slot="default"></i>
                        <div slot="file" slot-scope="{file}">
                            <img :src="file.url" alt="" class="el-upload-list__item-thumbnail">
                            <span class="el-upload-list__item-actions">
                        <span @click="handlePictureCardPreview(file)"
                              class="el-upload-list__item-preview">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                      </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img :src="dialogImageUrl" alt="" width="100%">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>

</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            value1: '',
            act: {
                aname: '',
                aimg: '',
                atype: '0',
                adescription: '',
                startTime: '',
                endTime: '',
                aadmin: '',

            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        },
        created() {
        },
        methods: {
            onSubmit() {
                console.log(this.value1);
                console.log('submit!');
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            }
        }
    })
</script>
</body>
</html>
</body>
</html>
